<template>
  <a-modal
    :visible="visible"
    title="政策详情"
    width="90%"
    :footer="null"
    @cancel="handleClose"
  >
    <div style="width: 100%">
      <div class="rich-text" v-html="content" />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  // 接收父组件传递的可见性状态
  const props = defineProps({
    visible: Boolean,
    content: String,
  });
  const emit = defineEmits(['update:visible', 'on-save']); // 新增on-save事件传递保存数据

  // 关闭模态框
  const handleClose = () => {
    emit('update:visible', false);
  };
</script>

<style scoped lang="less">
  .rich-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    p {
      margin-bottom: 16px;
      text-align: justify;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      color: #333;
      font-weight: 600;
    }
    h1 {
      font-size: 24px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
    }
    h2 {
      font-size: 20px;
    }
    h3 {
      font-size: 18px;
    }
    h4 {
      font-size: 16px;
    }
    ul,
    ol {
      margin-left: 20px;
      margin-bottom: 16px;
    }
    li {
      margin-bottom: 8px;
    }
    blockquote {
      border-left: 4px solid #165dff;
      padding: 10px 15px;
      background-color: #f5f7ff;
      margin: 16px 0;
      font-style: italic;
    }
    a {
      color: #165dff;
      text-decoration: underline;
      &:hover {
        color: #0d47a1;
      }
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 16px 0;
      display: block;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
      font-size: 14px;
    }
    th,
    td {
      border: 1px solid #eee;
      padding: 8px 12px;
      text-align: left;
    }
    th {
      background-color: #f5f7ff;
      font-weight: 600;
    }
    pre {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;
      margin: 16px 0;
      font-family: monospace;
    }
  }
</style>
